



import React from 'react';
import ReactDOM from 'react-dom';
// import ReactDOM from 'react-dom/client';



const myReact = (
  function() {
    const stateList = [];
    const stateSetterList = [];
    let index = 0;

    // function createrState(inial, index) {
    //   return stateList[index] === undefined ? inial : stateList[index];
    // }
    function createrStateStter(inial, index) {
      return function setState(val) {
        if (typeof val === 'function') {
          stateList[index] = val(stateList[index]);
        } else {
          stateList[index] = val;
        }
        rednder();
      };
    }
    function useState(inial) {
      stateList[index] = stateList[index] === undefined ? inial : stateList[index];;
      stateSetterList[index] = createrStateStter(inial, index);
      let state = stateList[index];
      let setState = stateSetterList[index];
      index++;

      return [state, setState];
    }


    const rednder = () => {
      index = 0;
      ReactDOM.render(
        <App />,
        document.querySelector('#app'),
      );
    };
    return {
      useState
    };
  }
)();

const { useState } = myReact;

const App = () => {
  const [count, setCount] = useState(3);
  const [flag, setFlag] = useState(false);

  return <div>
    <div>{count}</div>
    <div>{flag ? 'ture' : 'false'}</div>
    <button onClick={() => { setCount(0); }}>归0</button>
    <button onClick={() => { setCount(x => x + 2); }}>+2</button>
    <button onClick={() => { setFlag(x => !x); }}> 取反</button>
  </div>;
};



// ReactDOM.createRoot(document.querySelector('#app')).render(<App />);
ReactDOM.render(
  <App />,
  document.querySelector('#app'),
);
